<template>
    <el-main>
        <el-form>
            <el-form-item>
                <el-button type="success" :icon="Plus" @click="addRoleBtn" v-permission="9">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableDate.roleList" style="width: 100%" max-height="600px" row-key="id" border
            :tree-props="{ children: 'children' }">
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="ord" label="排序" />
            <el-table-column width="200" align="center" label="操作" fixed="right">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editRoleBtn(scope.row)"
                        v-permission="10">编辑</el-button>
                    <DelBtn @delBtn="delRoleBtn(scope.row)" :permission="11"></DelBtn>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <!-- 新增或编辑弹窗 -->
    <RoleAddAndEdit ref="roleRef" @newGetRoleList="getRoleList">
    </RoleAddAndEdit>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Plus, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

import { DialogType } from '@/hooks/useDialog'
import { getRoleApi, delRoleApi } from '@/http/api/role'
import RoleAddAndEdit from './RoleAddAndEdit.vue'
import DelBtn from '@/components/DelBtn.vue'

// 定义表格数据
const tableDate = reactive({
    roleList: []
})
//获取数据赋值给列表
const getRoleList = async () => {
    await getRoleApi().then((res) => {
        if (res && res.code == 200) {
            tableDate.roleList = res.data
        }
    })
}
// 子组件RoleAddAndEdit的ref属性
const roleRef = ref<InstanceType<typeof RoleAddAndEdit>>()
// 添加角色
const addRoleBtn = () => {
    roleRef.value?.onShow(DialogType.ADD, '添加角色')
}
// 修改角色
const editRoleBtn = (editData: any) => {
    roleRef.value?.onShow(DialogType.EDIT, '修改角色', editData)
}
// 删除角色
const delRoleBtn = async (delData: any) => {
    await delRoleApi(delData.id).then(res => {
        if (res && res.code == 204) {
            ElMessage.success('删除成功！')
            getRoleList()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

onMounted(() => {
    getRoleList()
})

</script>

<style scoped lang='scss'>
</style>